<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九江市浔阳区浔东小学放学管理系统</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(90deg, #1e6bca 0%, #2c95e7 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .school-info {
            font-size: 16px;
            opacity: 0.9;
        }
        
        .view-toggle {
            display: flex;
            background: #f1f8ff;
            padding: 10px;
            justify-content: center;
        }
        
        .view-btn {
            padding: 10px 20px;
            margin: 0 10px;
            border: none;
            border-radius: 50px;
            background: #e4f0ff;
            color: #1e6bca;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .view-btn.active {
            background: #1e6bca;
            color: white;
            box-shadow: 0 4px 10px rgba(30, 107, 202, 0.3);
        }
        
        .content {
            padding: 20px;
        }
        
        /* 大屏幕视图样式 */
        .screen-view {
            display: none;
        }
        
        .grades-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .grade-section {
            background: #f9f9f9;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .grade-title {
            font-size: 20px;
            color: #1e6bca;
            margin-bottom: 15px;
            text-align: center;
            font-weight: bold;
        }
        
        .classes-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        
        .class-item {
            background: white;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            border: 2px solid #e0e0e0;
            transition: all 0.3s;
        }
        
        .class-item.waiting {
            border-color: #ff4d4d;
            background: linear-gradient(135deg, #fff2f0 0%, #fff7f5 100%);
        }
        
        .class-item.dismissing {
            border-color: #ff9900;
            animation: pulse 1s infinite;
            background: linear-gradient(135deg, #fff7e6 0%, #fffbf0 100%);
        }
        
        .class-item.dismissed {
            border-color: #52c41a;
            background: linear-gradient(135deg, #f6ffed 0%, #f9fff0 100%);
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(255, 153, 0, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0); }
        }
        
        .class-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        
        .class-status {
            font-size: 14px;
            padding: 5px 10px;
            border-radius: 20px;
            display: inline-block;
        }
        
        .status-waiting {
            background: #fff2f0;
            color: #ff4d4d;
        }
        
        .status-dismissing {
            background: #fff7e6;
            color: #fa8c16;
        }
        
        .status-dismissed {
            background: #f6ffed;
            color: #52c41a;
        }
        
        /* 手机控制视图样式 */
        .control-view {
            display: none;
        }
        
        .control-grades-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .control-grade-section {
            background: linear-gradient(135deg, #e6f7ff 0%, #f0f8ff 100%);
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .control-classes-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        
        .control-class-item {
            background: white;
            border-radius: 8px;
            padding: 12px;
            text-align: center;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            border: 2px solid #e0e0e0;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .control-class-item.waiting {
            border-color: #ff4d4d;
            background: linear-gradient(135deg, #fff2f0 0%, #fff7f5 100%);
        }
        
        .control-class-item.dismissing {
            border-color: #ff9900;
            animation: pulse 1s infinite;
            background: linear-gradient(135deg, #fff7e6 0%, #fffbf0 100%);
        }
        
        .control-class-item.dismissed {
            border-color: #52c41a;
            background: linear-gradient(135deg, #f6ffed 0%, #f9fff0 100%);
        }
        
        .time-display {
            text-align: center;
            margin-top: 30px;
            padding: 15px;
            background: #2c3e50;
            color: white;
            border-radius: 10px;
            font-size: 24px;
            font-weight: bold;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            background: #52c41a;
            color: white;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transform: translateX(100%);
            opacity: 0;
            transition: all 0.3s;
            z-index: 1000;
        }
        
        .notification.show {
            transform: translateX(0);
            opacity: 1;
        }
        
        @media (max-width: 768px) {
            .grades-container {
                grid-template-columns: 1fr;
            }
            
            .control-grades-container {
                grid-template-columns: 1fr;
            }
            
            .classes-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>九江市浔阳区浔东小学</h1>
            <div class="school-info">放学管理系统</div>
        </header>
        
        <div class="view-toggle">
            <button class="view-btn active" onclick="showView('control')">手机控制端</button>
            <button class="view-btn" onclick="showView('screen')">大屏幕视图</button>
        </div>
        
        <div class="content">
            <!-- 大屏幕视图 -->
            <div id="screenView" class="screen-view">
                <div class="grades-container" id="screenClassesContainer">
                    <!-- 班级将由JavaScript动态生成 -->
                </div>
                <div class="time-display" id="timeDisplay">
                    <!-- 时间显示 -->
                </div>
            </div>
            
            <!-- 手机控制视图 -->
            <div id="controlView" class="control-view">
                <div class="control-grades-container" id="controlClassesContainer">
                    <!-- 控制按钮将由JavaScript动态生成 -->
                </div>
            </div>
        </div>
    </div>
    
    <div class="notification" id="notification"></div>
    
    <audio id="dismissSound" src="https://assets.mixkit.co/sfx/preview/mixkit-school-bell-chime-1007.mp3"></audio>
    
    <script>
        // 学校配置
        const schoolConfig = {
            name: '九江市浔阳区浔东小学',
            grades: 6,
            classesPerGrade: 5
        };
        
        // 班级状态数据
        let classStatuses = {};
        
        // 视图控制
        function showView(view) {
            document.querySelectorAll('.view-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            
            document.getElementById('screenView').style.display = 'none';
            document.getElementById('controlView').style.display = 'none';
            
            if (view === 'screen') {
                document.querySelector('.view-btn:nth-child(2)').classList.add('active');
                document.getElementById('screenView').style.display = 'block';
                renderScreenView();
            } else {
                document.querySelector('.view-btn:nth-child(1)').classList.add('active');
                document.getElementById('controlView').style.display = 'block';
                renderControlView();
            }
        }
        
        // 初始化数据
        function initializeData() {
            // 尝试从本地存储加载数据
            const savedData = localStorage.getItem('xundongSchoolData');
            
            if (savedData) {
                classStatuses = JSON.parse(savedData);
                
                // 检查是否需要重置（过了一天）
                const lastUpdated = localStorage.getItem('xundongSchoolLastUpdated');
                const today = new Date().toDateString();
                
                if (lastUpdated !== today) {
                    // 重置所有状态
                    for (const classId in classStatuses) {
                        classStatuses[classId] = 'waiting';
                    }
                    localStorage.setItem('xundongSchoolLastUpdated', today);
                }
            } else {
                // 初始化新数据
                for (let grade = 1; grade <= schoolConfig.grades; grade++) {
                    for (let classNum = 1; classNum <= schoolConfig.classesPerGrade; classNum++) {
                        const classId = `grade_${grade}_class_${classNum}`;
                        classStatuses[classId] = 'waiting';
                    }
                }
                
                localStorage.setItem('xundongSchoolLastUpdated', new Date().toDateString());
            }
            
            // 保存数据
            saveData();
        }
        
        // 保存数据到本地存储
        function saveData() {
            localStorage.setItem('xundongSchoolData', JSON.stringify(classStatuses));
        }
        
        // 渲染大屏幕视图
        function renderScreenView() {
            const container = document.getElementById('screenClassesContainer');
            container.innerHTML = '';
            
            for (let grade = 1; grade <= schoolConfig.grades; grade++) {
                const gradeSection = document.createElement('div');
                gradeSection.className = 'grade-section';
                
                const gradeTitle = document.createElement('div');
                gradeTitle.className = 'grade-title';
                
                // 使用汉字表示年级
                const gradeNames = ['一', '二', '三', '四', '五', '六'];
                gradeTitle.textContent = `${gradeNames[grade-1]}年级`;
                
                gradeSection.appendChild(gradeTitle);
                
                const classesContainer = document.createElement('div');
                classesContainer.className = 'classes-container';
                
                for (let classNum = 1; classNum <= schoolConfig.classesPerGrade; classNum++) {
                    const classId = `grade_${grade}_class_${classNum}`;
                    const status = classStatuses[classId] || 'waiting';
                    
                    const classItem = document.createElement('div');
                    classItem.className = `class-item ${status}`;
                    
                    const className = document.createElement('div');
                    className.className = 'class-name';
                    className.textContent = `${gradeNames[grade-1]}年${classNum}班`;
                    
                    const classStatus = document.createElement('div');
                    classStatus.className = `class-status status-${status}`;
                    
                    if (status === 'waiting') {
                        classStatus.textContent = '等待放学';
                    } else if (status === 'dismissing') {
                        classStatus.textContent = '放学中';
                    } else {
                        classStatus.textContent = '已放学';
                    }
                    
                    classItem.appendChild(className);
                    classItem.appendChild(classStatus);
                    classesContainer.appendChild(classItem);
                }
                
                gradeSection.appendChild(classesContainer);
                container.appendChild(gradeSection);
            }
            
            // 更新时间显示
            updateTimeDisplay();
        }
        
        // 渲染手机控制视图
        function renderControlView() {
            const container = document.getElementById('controlClassesContainer');
            container.innerHTML = '';
            
            for (let grade = 1; grade <= schoolConfig.grades; grade++) {
                const gradeSection = document.createElement('div');
                gradeSection.className = 'control-grade-section';
                
                const gradeTitle = document.createElement('div');
                gradeTitle.className = 'grade-title';
                
                // 使用汉字表示年级
                const gradeNames = ['一', '二', '三', '四', '五', '六'];
                gradeTitle.textContent = `${gradeNames[grade-1]}年级`;
                
                gradeSection.appendChild(gradeTitle);
                
                const classesContainer = document.createElement('div');
                classesContainer.className = 'control-classes-container';
                
                for (let classNum = 1; classNum <= schoolConfig.classesPerGrade; classNum++) {
                    const classId = `grade_${grade}_class_${classNum}`;
                    const status = classStatuses[classId] || 'waiting';
                    
                    const classItem = document.createElement('div');
                    classItem.className = `control-class-item ${status}`;
                    classItem.setAttribute('data-class', classId);
                    
                    const className = document.createElement('div');
                    className.className = 'class-name';
                    className.textContent = `${classNum}班`;
                    
                    const classStatus = document.createElement('div');
                    classStatus.className = `class-status status-${status}`;
                    
                    if (status === 'waiting') {
                        classStatus.textContent = '点击放学';
                        classItem.onclick = () => dismissClass(classId);
                    } else if (status === 'dismissing') {
                        classStatus.textContent = '放学中';
                    } else {
                        classStatus.textContent = '已放学';
                        classItem.onclick = () => resetClass(classId);
                    }
                    
                    classItem.appendChild(className);
                    classItem.appendChild(classStatus);
                    classesContainer.appendChild(classItem);
                }
                
                gradeSection.appendChild(classesContainer);
                container.appendChild(gradeSection);
            }
        }
        
        // 放学校班级
        function dismissClass(classId) {
            // 更新状态为"放学中"
            classStatuses[classId] = 'dismissing';
            saveData();
            
            // 播放声音
            playDismissSound();
            
            // 显示通知
            const classParts = classId.split('_');
            const gradeNames = ['一', '二', '三', '四', '五', '六'];
            const gradeName = gradeNames[parseInt(classParts[1])-1];
            const className = parseInt(classParts[3]);
            
            showNotification(`${gradeName}年${className}班 正在放学`);
            
            // 更新视图
            renderAllViews();
            
            // 10秒后更新为"已放学"
            setTimeout(() => {
                classStatuses[classId] = 'dismissed';
                saveData();
                renderAllViews();
                showNotification(`${gradeName}年${className}班 已放学`);
            }, 10000);
        }
        
        // 重置班级状态
        function resetClass(classId) {
            classStatuses[classId] = 'waiting';
            saveData();
            renderAllViews();
            
            const classParts = classId.split('_');
            const gradeNames = ['一', '二', '三', '四', '五', '六'];
            const gradeName = gradeNames[parseInt(classParts[1])-1];
            const className = parseInt(classParts[3]);
            
            showNotification(`${gradeName}年${className}班 状态已重置`);
        }
        
        // 播放放学铃声
        function playDismissSound() {
            const sound = document.getElementById('dismissSound');
            sound.currentTime = 0;
            
            // 播放三次
            let count = 0;
            const playInterval = setInterval(() => {
                sound.play();
                count++;
                
                if (count >= 3) {
                    clearInterval(playInterval);
                }
            }, 1000);
        }
        
        // 更新所有视图
        function renderAllViews() {
            renderScreenView();
            renderControlView();
        }
        
        // 显示通知
        function showNotification(message) {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.classList.add('show');
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }
        
        // 更新时间显示
        function updateTimeDisplay() {
            const now = new Date();
            const timeString = now.toLocaleTimeString('zh-CN', {
                hour12: false,
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
            
            const dateString = now.toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                weekday: 'long'
            });
            
            document.getElementById('timeDisplay').innerHTML = `
                <div>${dateString}</div>
                <div>${timeString}</div>
            `;
        }
        
        // 初始化应用
        function initApp() {
            // 初始化数据
            initializeData();
            
            // 默认显示控制视图
            showView('control');
            
            // 每秒更新时间
            setInterval(updateTimeDisplay, 1000);
            
            // 每天凌晨检查是否需要重置
            setInterval(() => {
                const lastUpdated = localStorage.getItem('xundongSchoolLast